<template>
  <div class="min-h-screen bg-gray-50">
    <div class="flex">
      <!-- 左侧导航 -->
      <div class="w-64 bg-white shadow-sm h-screen">
        <div class="p-6 border-b">
          <div class="flex items-center gap-3">
            <img
              src="https://ai-public.mastergo.com/ai/img_res/f181576e695dad80f53211028b3b7813.jpg"
              alt="avatar"
              class="w-10 h-10 rounded-full object-cover"
            />
            <div>
              <div class="font-medium">王总监</div>
              <div class="text-sm text-gray-500">科技招聘总监</div>
            </div>
          </div>
        </div>

        <div class="py-4">
          <el-menu
            class="w-64 min-h-screen border-r border-gray-200"
            :default-active="activeIndex"
            @select="handleSelect"
          >
            <el-menu-item
              v-for="(item, index) in menuItems"
              :key="index"
              :index="item.key"
              :route="item.route"
              class="cursor-pointer hover:bg-gray-50"
              :class="{ 'bg-blue-50 text-blue-600': currentTab === item.key }"
            >
              <el-icon><component :is="item.icon" /></el-icon>
              <span>{{ item.label }}</span>
            </el-menu-item>
          </el-menu>
        </div>
      </div>
      <!-- 右侧内容 -->
      <div class="flex-grow">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { ref, onMounted, watch } from "vue";

const activeIndex = ref('0');
const router = useRouter();
const route = useRoute();
const currentTab = ref("profile");

const menuItems = [
  {
    key: "profile",
    label: "个人信息",
    icon: "User",
    route: "/boss-space/personinformation",
  },
  {
    key: "job",
    label: "岗位管理",
    icon: "Briefcase",
    route: "/boss-space/positionmanage",
  },
  {
    key: "password",
    label: "修改密码",
    icon: "Edit",
    route: "/boss-space/changepassword",
  },
  {
    key: "inbox",
    label: "收件箱",
    icon: "Message",
    route: "/boss-space/inbox",
  },
  {
    key: "sent",
    label: "发件箱",
    icon: "ChatDotSquare",
    route: "/boss-space/outbox",
  },
];

const handleSelect = (index) => {
  currentTab.value = index;
  router.push(menuItems.find(item => item.key === index).route);
};

onMounted(() => {
  router.push(menuItems[0].route);
});

watch(() => route.path, (newPath) => {
  const item = menuItems.find(item => item.route === newPath);
  if(item) {
    currentTab.value = item.key;
    activeIndex.value = item.key;
  }
});
</script>

<style scoped>
#app{
  margin-top: 0px;
}
</style>